<template>
	<view class="learn">
		<view class="top-search">
			<u-search placeholder="输入搜索内容" v-model="keyword"></u-search>
		</view>
		<view class="main-content">
			<view v-if="dataList.length > 0" class="list">
				<view class="item" v-for="(item,index) in dataList" :key="index" @click="handleDetail(item)">
					<img :src="item.img" alt="" class="img"/>
					<view class="title"> {{item.title}} </view>
					<view class="num"> {{item.num}}人观看 </view>
				</view>
			</view>
			<img v-else src="@/static/img/empty.png" alt="" style="width: 100%;margin-top: 20vh;"/>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				dataList:[
					{
						id:1,
						img: require('@/static/img/zhxl.png'),
						title:'声母训练怎样入门',
						num:'69'
					},
					{
						id:2,
						img: require('@/static/img/zhxl.png'),
						title:'声母训练怎样入门',
						num:'69'
					},
					{
						id:3,
						img: require('@/static/img/zhxl.png'),
						title:'声母训练怎样入门',
						num:'69'
					},
					{
						id:4,
						img: require('@/static/img/zhxl.png'),
						title:'声母训练怎样入门',
						num:'69'
					}
				]
			}
		},
		methods: {
			handleDetail(item){
				uni.navigateTo({
					url:'/pages/learn/videoDetail'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	view {
		box-sizing: border-box;
	}
	.learn {
		background-color: #F3F5F8;
		min-height: 100vh;
		.top-search {
			padding: 16rpx 32rpx;
			background-color: #fff;
		}
	}
	.main-content {
		padding: 20rpx 32rpx;
		
		.list {
			display: flex;
			gap: 32rpx 24rpx;
			flex-wrap: wrap;
			margin-top: 28rpx;
			.item {
				width: calc(50% - 13rpx);
				.img {
					width: 100%;
				}
				.title {
					margin-top: 18rpx;
					font-size: 32rpx;
					color: #263459;
					line-height: 1;
				}
				.num {
					margin-top: 16rpx;
					font-size: 24rpx;
					color: #666666;
					line-height: 1;
				}
			}
		}
	}
	
</style>
